<!-- src/components/Message.vue -->
<template>
  <div>
    <div v-if="message" :class="['alert', `alert-${message.type}`]">
      {{ message.text }}
    </div>
  </div>
</template>

<script>
export default {
  name: "Message",
  data() {
    return {
      message: null,
    };
  },
  methods: {
    show(text, type) {
      this.message = {text, type};

      // 3秒后自动清除消息
      setTimeout(() => {
        this.message = null;
      }, 3000);
    },

    success(text) {
      this.show(text, "success");
    },

    error(text) {
      this.show(text, "danger");
    },
  },
};
</script>
